<script setup>
  import {ref} from "vue";

  const productArr=ref([
    {title:'小米14',price:8000,num:500},
    {title: '苹果16',price: 10000,num:400},
    {title:'魅族60',price: 2000,num:600 },
    {title: '华为70',price: 6700,num:900}
  ]);
  const del=(index)=>{
    if (confirm('你真的打算删除商品吗')){
      productArr.value.splice(index,1)
    }
  }
</script>

<template>
  <h1>我是E组件</h1>
  <ul>
    <li v-for="item in 5">{{item}}</li>
  </ul>
  <ul>
    <li v-for="item in productArr">{{item}}</li>
  </ul>
  <table border="1px">
    <tr>
      <th>序号</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>操作</th>
    </tr>
    <tr v-for="(pro,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{pro.title}}</td>
      <td>{{pro.price}}</td>
      <td>{{pro.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<style scoped>

</style>